<template>
	<!-- /pages/person/othersHomepage -->
	<view class="personal">
		<!-- 返回图标 -->
		<uni-icons type="back" size="30" color="white" class='icon' @click="router(1)"></uni-icons>
		<!-- 背景图 -->
		<image class="bgImg" :src="activeUser.userImg" mode=""></image>
		<view class="person">
			<view class="top">
				<view class="imgBox">
					<image :src="activeUser.userImg" mode="heightFix"></image>
				</view>
				<view class="three">
					<text class="username">{{activeUser.userName}}</text>
					<view>{{jsonParseFollow}}<text>关注</text></view>
					<view>{{jsonParseFans}}<text>粉丝</text></view>
					<view>{{activeUser.dianzanSize}}<text>点赞</text></view>
				</view>
				<view class="btn">
					<view class="circle" >
						<uni-icons type="plusempty" size="30" color="white" v-if="!isShow" @click="click"></uni-icons>
						<uni-icons type="closeempty" size="30" color="white" v-else @click="click2"></uni-icons>
					</view>
				</view>
			</view>
			<view class="content">
				{{activeUser.userSign}}
			</view>
		</view>
		<el-tabs v-model="active" @tab-click="handleClick">
			<el-tab-pane label="他卖出的" name="1">
				<item-vue :index='active' :otherUserId='otherUserId' />
			</el-tab-pane>
			<el-tab-pane label="他的帖子" name="2">
				<item-vue :index='active' :otherUserId='otherUserId' />
			</el-tab-pane>
			<el-tab-pane label="他的动态" name="3">
				<item-vue :index='active' :otherUserId='otherUserId' />
			</el-tab-pane>
		</el-tabs>
	</view>
</template>

<script>
	import itemVue from '@/pages/person/otherHomepageChild.vue'
	export default {
		data() {
			return {
				active: '1',
				isShow: '',
				// 当前页面用户userId
				otherUserId: 0,
				// 当前页面用户数据
				activeUser: {},
				// 当前登录用户userId
				userId: 0,
				// 当前登录用户数据
				userData: {}
			};
		},
		components: {
			itemVue
		},
		onLoad: function ({otherUserId}) {
			this.otherUserId = otherUserId
			this.$api.getTcygUserId(otherUserId).then(res => {
				// console.log(res.data[0])
				if(res.code == 200) {
					this.activeUser = res.data[0]
				}
			})
		},
		onShow() {
			const userId = getApp().globalData.userId;
			this.userId = userId
			// console.log(userId)
			this.$api.getTcygUserId(userId).then(res => {
				// console.log(res.data[0])
				if(res.code == 200) {
					this.userData = res.data[0]
				}
			})
		},
		methods: {
			handleClick(tab, event) {
				// console.log(this.active)
			},
			router(path) {
				if (path === 1) {
					uni.navigateBack({
						delta: path
					})
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			click() {
				let otherFans = JSON.parse(this.activeUser.fansSize)
				otherFans.push(this.userId)
				this.activeUser.fansSize = JSON.stringify(otherFans)
				this.$api.putTcyg(this.activeUser)
				
				let userFollow = JSON.parse(this.userData.followSize)
				userFollow.push(Number(this.otherUserId))
				this.userData.followSize = JSON.stringify(userFollow)
				this.$api.putTcyg(this.userData)
			},
			click2() {
				// 当前页面用户粉丝 -1
				this.activeUser.fansSize = JSON.stringify(JSON.parse(this.activeUser.fansSize).filter(item => item !== this.userId))
				this.$api.putTcyg(this.activeUser)
				
				this.userData.followSize = JSON.stringify(JSON.parse(this.userData.followSize).filter(item => item != this.otherUserId))
				this.$api.putTcyg(this.userData)
			}
		},
		computed:{
			jsonParseFollow(){
				return this.activeUser.followSize ? JSON.parse(this.activeUser.followSize).length : 0
			},
			jsonParseFans(){
				return this.activeUser.fansSize ? JSON.parse(this.activeUser.fansSize).length : 0
			},
		},
		watch: {
			userData: {
				handler(newValue, oldValue) {
					// console.log(newValue)
					if(JSON.parse(newValue.followSize).includes(this.activeUser.userId)) {
						// console.log(111)
						this.isShow = true
					} else {
						// console.log(222)
						this.isShow = false
					}
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-tabs__nav {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	/deep/ .el-tabs__active-bar {
		width: 0 !important;
	}

	/deep/ .el-tabs__item {
		width: 28%;
		text-align: center;
		padding: 0;
	}

	/deep/ .el-tabs__item.is-active {
		color: rgb(40, 210, 209);
		border-bottom: 2px solid rgb(40, 210, 209);
	}

	.personal {
		width: 100vw;
		height: 100vh;
		background-color: white;
		position: relative;

		.icon {
			position: absolute;
			top: 2%;
			left: 2%;
			z-index: 9999;
		}

		.bgImg {
			width: 100%;
			height: 30vh;
			filter: blur(5px);
		}

		.person {
			width: 100%;
			height: 20vh;

			.top {
				width: 100%;
				height: 60%;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.imgBox {
					width: 20%;
					height: 100%;
					position: relative;

					image {
						z-index: 9999;
						height: 110%;
						border-radius: 50%;
						position: absolute;
						top: -30%;
						left: 10%;
					}
				}

				.three {
					width: 60%;
					display: flex;
					justify-content: space-around;

					.username {
						z-index: 9999;
						position: absolute;
						top: -90%;
						left: 15%;
						font-size: 16px;
						color: black;
						font-weight: bold;
					}

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					text {
						color: grey;
						font-size: 26upx;
					}
				}

				.btn {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.circle {
						width: 65%;
						height: 60%;
						border-radius: 50%;
						background: rgb(40, 210, 209);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.content {
				width: 90%;
				height: 35%;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 10upx 20upx;
				border-radius: 12upx;
				font-size: 26upx;
				background: rgb(244, 244, 244);
				color: rgb(102, 102, 102);
				display: flex;
				align-items: center;
			}
		}

	}
</style>
